<!--
积分
 -->
<template>
  <div>
    <div class="invitationSelectTime">
      <div class="invitationSelectTimeTitle" @click="select()">选择时间：</div>
      <el-date-picker
        v-model="time"
        type="monthrange"
        align="right"
        unlink-panels
        range-separator="至"
        start-placeholder="开始月份"
        end-placeholder="结束月份"
        :picker-options="pickerOptions"
      >
      </el-date-picker>
    </div>
    <noMore v-if="invitationDetail.length == 0"></noMore>

    <div
      class="invitationBox"
      v-for="(item, index) in invitationDetail"
      :key="index"
    >
      <div class="invitationBoxLeft">
        <div class="invitationName">{{ item | name }}</div>
        <div class="invitationNum">
          {{ item.inttype | filterType }}{{ item.integral }}
        </div>
      </div>
      <div class="invitationBoxRight">
        <div class="invitationTime">{{ item.complete_time | timeF }}</div>
      </div>
    </div>
    <div class="invitationPagination">
      <el-pagination
        background
        @current-change="handleCurrentChange"
        :page-size="limitSize"
        layout="prev, pager, next, jumper"
        :total="RecordeSize"
      ></el-pagination>
    </div>
  </div>
</template>

<script>
import { get_completeTask } from "../../../api/completeTask";
import noMore from "../../../components/noMore";
import { formatDateTime } from "../../../common/Time";
export default {
  name: "myInvitation",
  components: {
    noMore
  },
  filters: {
    filterType(val) {
      if (val == "add") {
        return "+";
      } else {
        return "-";
      }
    },
    name(val) {
      if (val.goodid) {
        return val.goodid.title;
      } else if (val.taskid) {
        return val.taskid.taskname;
      }
    },
    timeF(val) {
      return formatDateTime(Date.parse(val));
    }
  },
  watch: {
    time: function(newVal) {
      if (newVal) {
        var startTime = new Date(newVal[0]).toJSON();
        var endTime = new Date(newVal[1]).toJSON();
        this.query.complete_time = {
          $gte: startTime,
          $lt: endTime
        };
        this.get_data();
      } else {
        delete this.query.order_time;
        this.get_data();
      }
    }
  },
  data() {
    return {
      currentPage4: 4,
      query: {
        userid: this.$store.getters.userInfo._id
      },
      invitationDetail: [],
      pickerOptions: {
        shortcuts: [
          {
            text: "本月",
            onClick(picker) {
              var start = new Date();
              start.setDate(1);
              picker.$emit("pick", [start, new Date()]);
            }
          },
          {
            text: "今年至今",
            onClick(picker) {
              const end = new Date();
              const start = new Date(new Date().getFullYear(), 0);
              picker.$emit("pick", [start, end]);
            }
          },
          {
            text: "最近六个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setMonth(start.getMonth() - 6);
              picker.$emit("pick", [start, end]);
            }
          }
        ]
      },
      time: "",
      skipSize: 0, //开始位置
      RecordeSize: 0, //总文章
      limitSize: 10
    };
  },
  created() {
    this.get_data();
  },
  methods: {
    async get_data() {
      var completeTaskdata = await get_completeTask({
        query: {
          ...this.query
        },
        populate: JSON.stringify([{ path: "taskid" }, { path: "goodid" }]),
        sort: { _id: -1 },
        skip: this.skipSize,
        limit: this.limitSize,
        count: true
      });
      console.log(this.query);

      console.log(completeTaskdata);
      this.invitationDetail = completeTaskdata.data;
      this.RecordeSize = completeTaskdata.countnum;
    },
    select() {
      console.log(this.value2);
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      this.skipSize = (val - 1) * this.limitSize;
      console.log(`当前页: ${val}`);
      this.get_data();
    }
  }
};
</script>

<style lang="scss" scoped>
.invitationSelectTime {
  display: flex;
  align-items: center;
  .invitationSelectTimeTitle {
    font-size: 17px;
    margin: 0 10px 0 0;
  }
}

.invitationBox {
  display: flex;
  justify-content: space-between;
  height: 80px;
  border-bottom: 1px dashed #919baf;
  .invitationBoxLeft {
    display: flex;
    align-items: center;
    .invitationName {
      font-size: 18px;
      max-width: 260px;
      height: 40px;
      line-height: 40px;
      text-overflow: ellipsis;
      white-space: nowrap;
      overflow: hidden;
    }
    .invitationNum {
      font-size: 18px;
      margin: 0 0 0 20px;
    }
  }
  .invitationBoxRight {
    display: flex;
    align-items: center;
    .invitationTime {
      font-size: 18px;
      color: #919baf;
    }
  }
}

.invitationPagination {
  height: 80px;
  display: flex;
  align-items: center;
}
</style>
